<template>
  <PageWrapper title="公司信息配置" v-loading="loading">
    <div class="py-8 bg-white flex flex-col justify-center items-center" style="padding: 16px">
      <BasicForm @register="register" style="margin-bottom: 50px" />
      <div class="footer">
        <div v-if="!isEdit" class="flex justify-center">
          <a-button class="!ml-4" type="primary" @click="isEdit = true"> 修改 </a-button>
        </div>
        <div v-else class="flex justify-center">
          <a-button @click="isEdit = false"> 取消 </a-button>
          <a-button class="!ml-4" type="primary" @click="handleSubmit"> 确认 </a-button>
        </div>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { BasicForm, useForm } from '/@/components/Form';
  import { formSchema } from './index.data';
  import { Tinymce } from '/@/components/Tinymce/index';
  import { h } from 'vue';
  import { getDetail, UpdateData } from '/@/api/aboutUs/index';
  import { CompanyItem } from '/@/api/aboutUs/model';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useRoute } from 'vue-router';
  const route = useRoute();
  const isEdit = ref(false); // 是否编辑状态
  const loading = ref(false);
  const companyData = ref<CompanyItem>({});
  const { createMessage } = useMessage();
  const [register, { validate, setProps, updateSchema, setFieldsValue }] = useForm({
    size: 'large',
    layout: 'vertical',
    // labelWidth: 140,
    rowProps: {
      gutter: 24,
    },
    showActionButtonGroup: false,
    schemas: formSchema,
    disabled: !isEdit.value,
  });
  watch(
    () => isEdit.value,
    (val) => {
      if (val) {
        setProps({ disabled: false });
        updateSchema([
          {
            field: 'introduce',
            render: ({ model, field }) => {
              return h(Tinymce, {
                value: model[field],
                showImageUpload: true,
                onChange: (value: string) => {
                  model[field] = value;
                },
              });
            },
          },
          {
            field: 'logoUrl_p',
            show: false,
          },
          {
            field: 'logoUrl',
            show: true,
          },
        ]);
      } else {
        updateSchema([
          {
            field: 'introduce',
            render: ({ model }) => {
              return h('div', {
                innerHTML: model.introduce,
                style: {
                  border: '1px solid #d9d9d9',
                  padding: '10px',
                  'border-radius': '2px',
                  'min-height': '100px',
                  'background-color': '#f5f5f5',
                  cursor: 'not-allowed',
                },
              });
            },
          },
          {
            field: 'logoUrl_p',
            show: true,
          },
          {
            field: 'logoUrl',
            show: false,
          },
        ]);
        setProps({ disabled: true });
        setTimeout(() => {
          setFieldsValue(companyData.value);
        }, 100);
      }
      setTimeout(() => {
        setFieldsValue({
          logoUrl: [companyData.value.logoUrl],
          logoUrl_p: [companyData.value.logoUrl],
        });
      }, 100);
    },
  );
  async function getCompanyDetail() {
    try {
      loading.value = true;
      const res = await getDetail({ zhCn: route.meta?.zhCn ?? 1 });
      isEdit.value = false;
      console.log(res);
      companyData.value = res;
      setProps({
        model: { ...res, logoUrl_p: [res.logoUrl] },
      });

      setTimeout(() => {
        setFieldsValue({ logoUrl: [res.logoUrl], logoUrl_p: [res.logoUrl] });
      }, 100);
    } catch (error) {}
    loading.value = false;
  }
  async function handleSubmit() {
    try {
      loading.value = true;
      const values = await validate();

      await UpdateData({
        ...values,
        logoUrl: values?.logoUrl[0],
        id: companyData.value?.id,
        name: '名字',
        zhCn: route.meta?.zhCn ?? 1,
      });
      createMessage.success('修改成功');
      getCompanyDetail();
    } catch (error) {
      console.log(error);
    }
    loading.value = false;
  }
  onMounted(() => {
    getCompanyDetail();
  });
</script>
<style lang="less" scoped>
  .footer {
    position: fixed;
    bottom: 0;
    padding: 10px;
    background: #fff;
    width: 100%;
    border-top: 1px solid rgb(245, 247, 250);
  }
</style>
